<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>报价记录 - 采购大厅</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../style/index.css">
</head>

<body>
<div id="app" v-cloak class="minWidth" style="padding: 15px;">
    <el-card shadow="never" style="margin-bottom: 12px;">
        <div slot="header" class="clearfix" style="display:flex; align-items:center; justify-content:space-between;">
            <span>报价记录</span>
            <div style="display:flex; align-items:center; gap:8px;">
                <el-button size="small" @click="handleBack">返回</el-button>
                <el-input v-model="form.value" placeholder="搜索订单或企业" clearable size="small" style="width:260px;" @keyup.enter.native="handleSerach"></el-input>
                <el-button type="primary" size="small" @click="handleSerach">搜索</el-button>
            </div>
        </div>

        <!-- 顶部统一求购原信息 -->
        <div v-if="pageAcquisition" style="margin-bottom: 12px; background:#f9fafb; padding:10px; border-radius:4px;">
            <div style="font-weight: 600; color:#606266; margin-bottom: 6px;">求购原信息</div>
            <el-descriptions :column="3" size="small" border>
                <el-descriptions-item>
                    <template slot="label">报价编号</template>
                    <span>{{ pageAcquisition.Acquisition_Unit_Price_SerialNumber }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">商品编号</template>
                    <span>{{ pageAcquisition.Article_SerialNumber }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">供应总量</template>
                    <span>{{ pageAcquisition.Total_Quantity }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">已售量</template>
                    <span>{{ pageAcquisition.Sales_Quantity }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">剩余量</template>
                    <span>{{ getRemainQuantity(pageAcquisition) }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">起订量</template>
                    <span>{{ pageAcquisition.Start_Quantity }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">步长</template>
                    <span>{{ pageAcquisition.Unit_Quantity }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">单价</template>
                    <span>{{ pageAcquisition.Unit_Price }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">联系人</template>
                    <span>{{ pageAcquisition.Contacts }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">联系电话</template>
                    <span>{{ pageAcquisition.Contacts_Phone }}</span>
                </el-descriptions-item>
                <el-descriptions-item :span="6">
                    <template slot="label">收货地址</template>
                    <span>{{ formatAddress(pageAcquisition) }}</span>
                </el-descriptions-item>
            </el-descriptions>
        </div>

        <!-- 卡片列表（滚动容器） -->
        <div style="max-height: 540px; overflow-y: auto; padding-right: 4px;">
            <el-card v-for="row in list" :key="row.Acquisition_Order_SerialNumber" shadow="never" style="margin-bottom: 12px;">
                <div slot="header" class="clearfix">
                    <span>订单 {{ row.Acquisition_Order_SerialNumber }}</span>
                    <el-tag :type="statusTagType(row.Row_Status)" style="float:right;">{{ formatStatus(row.Row_Status) }}</el-tag>
                </div>
                <el-descriptions :column="3" border size="small">
                    <el-descriptions-item>
                        <template slot="label">报价编号</template>
                        <span>{{ row.Acquisition_Unit_Price_SerialNumber }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">企业流水号</template>
                        <span>{{ row.Enterprise_Info_SerialNumber }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">交易数量</template>
                        <span>{{ row.Quantity }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">总金额</template>
                        <span>{{ row.Amount }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">已付金额</template>
                        <span>{{ row.Paid_Amount }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">剩余金额</template>
                        <span>{{ row.Remain_Amount }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">装运方式</template>
                        <span>{{ row.Shipment_Method_SerialNumber }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">运输方式</template>
                        <span>{{ row.Transport_Method_SerialNumber }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">付款方式</template>
                        <span>{{ row.Payment_Method_SerialNumber }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">交易流水号</template>
                        <span>{{ row.Trading_SerialNumber }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">联系人</template>
                        <span>{{ row.Contacts }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">联系人电话</template>
                        <span>{{ row.Contacts_Phone }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">收货省</template>
                        <span>{{ row.ProvinceNumber }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">收货市</template>
                        <span>{{ row.CityNumber }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">收货区</template>
                        <span>{{ row.CountyNumber }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item :span="3">
                        <template slot="label">详细地址</template>
                        <span>{{ row.Detailed_Address }}</span>
                    </el-descriptions-item>
                    <!-- 若存在拒绝记录则展示（容错处理，无日志表时不显示） -->
                    <el-descriptions-item v-if="row.examineLogs && row.examineLogs.length > 0" :span="3">
                        <template slot="label">拒绝理由</template>
                        <div>
                            <div v-for="(log, idx) in row.examineLogs" :key="idx" style="line-height: 20px;">{{ formatRejectLog(log, idx) }}</div>
                        </div>
                    </el-descriptions-item>
                    
                    <el-card shadow="never" style="margin-top: 14px;">
                        <div slot="header" class="clearfix">
                            <span>分阶段付款方案</span>
                        </div>
                        <el-table :data="stagedPayments" stripe border size="small" style="width: 100%">
                            <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
                            <el-table-column prop="Stage_Name" label="阶段" width="120"></el-table-column>
                            <el-table-column prop="Percent" label="金额比（%）" width="140"></el-table-column>
                            <el-table-column prop="Pay_Time" label="付款天数(天)" width="220"></el-table-column>
                            <el-table-column prop="Remark" label="备注" min-width="240" show-overflow-tooltip></el-table-column>
                        </el-table>
                        <div v-if="!stagedPayments || stagedPayments.length===0" style="padding: 12px; color: #909399;">暂无分阶段付款方案</div>
                    </el-card>
                </el-descriptions>
            </el-card>

            <div v-if="!list || list.length===0" style="padding: 12px; color: #909399;">暂无记录</div>
        </div>

        <div style="margin-top: 10px; text-align:right;">
            <el-pagination
                    @current-change="handlePageChange"
                    :current-page="form.PageNumber"
                    :page-size="form.RowAmount"
                    layout="prev, pager, next"
                    :total="total">
            </el-pagination>
        </div>
    </el-card>
</div>

<script type="text/javascript" src="../../../utils/jquery.min.js"></script>
<script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
<script type="text/javascript" src="../../../utils/vue.min.js"></script>
<script type="text/javascript" src="../../../component/elementUI/index.js"></script>
<script type="text/javascript" src="../../../utils/utils.js"></script>
<script type="text/javascript" src="../../../utils/http.js"></script>
<script type="text/javascript" src="../../../utils/components.js"></script>
<script src="./js/list.js"></script>
</body>
</html>